<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
<<<<<<< HEAD
    <!--在线引用 bootstrap-table.min.css-->
=======
    <!--在线引用 bootstrap css    -->
    <!-- CSS only -->
>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!--在线引用 jquery    -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<<<<<<< HEAD


=======
>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
<body>
<div class="container-fluid">
    <h1>学生信息页面</h1>
</div>
<<<<<<< HEAD


=======
>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
<div class="input-group mb-3" style="display: inline-flex">
    <input type="text" id="mytext" class="form-control" placeholder="请输入姓名" aria-label="Recipient's username"
           aria-describedby="button-addon2">
    <button class="btn btn-outline-secondary" onclick="myClick()" type="button" id="button-addon2"
            style="background: #2aabd2">姓名查询
    </button>
</div>

<<<<<<< HEAD
<!-- 自定义 添加 按钮 -->
<button type="button" class="btn btn-primary" onclick="addClick(1)" data-toggle="modal" data-target="#studentModal">
    新增
</button>
<!-- 自定义 多条件查询 按钮-->
<button type="button" class="btn btn-primary" onclick="addClick(2)" data-toggle="modal" data-target="#studentModal">
    多条件查询
</button>
<!-- 自定义添加弹出界面-->
=======
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" onclick="addClick()" data-toggle="modal" data-target="#studentModal">
    新增
</button>

<!-- Modal -->
>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
<div class="modal fade" id="studentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="studentForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="id">ID</label>
                        <input type="text" class="form-control" id="id" name="id" placeholder="id">
                    </div>
                    <div class="form-group">
                        <label for="sno">学号</label>
                        <input type="text" class="form-control" id="sno" name="sno" placeholder="学号">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" name="sex" id="sex">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="age">分数</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="分数">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<<<<<<< HEAD
                <!-- 根据要求设置点击函数                -->
                <button type="button" class="btn btn-primary" id="saveClick" >确认</button>

=======
                <button type="button" class="btn btn-primary" onclick="saveClick()">保存</button>
>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
            </div>
        </div>
    </div>
</div>
<<<<<<< HEAD
<!-- 显示数据的表格-->
<table class="table table-bordered" id="stuTable"></table>

<!--在线引用 bootstrap.min.js-->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!--在线引用 bootstrap-table.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>

<!--在线引用 bootstrap-table-zh-CN.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">


    function loadTable(){
        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            striped:true, //隔行变色效果
            pagination:true, // 底部显示分页条
            singleSelect:false, //允许多选
            pageNumber:1, // 如果设置了分页，首页页码
            pageSize:3,   // 如果设置了分页，每页数据条数
            sidePagination:"server",//设置在哪里分页
            editable:true, //可编辑
            dataType:"json",
            queryParams:function (params) {
                var paraObj ={
                    size:params.limit,
                    page:params.offset/params.limit,
                    sort:"id",
                    direct:"desc",
                };
                return paraObj;
            },
            columns: [{
                field: 'id',
                title: 'ID'
            }, {
                field: 'sno',
                title: '学号'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'sex',
                title: '性别',
                formatter: formatSex
            }, {
                field: 'age',
                title: '年龄'
            } , {
                field: 'score',
                title: '分数'
            }, {
                title: '操作1',
                field: 'id',
                formatter: option1
            }, {
                title: '操作2',
                field: 'id',
                formatter: option2
            }]
        })
    } // end of loadTable


    // 格式化性别"sex": 0,是女  "sex": 1,是男
    function formatSex(value, row, index) {
        return value == 1 ? "男" : "女";
    }
    // 定义更新按钮（id）
    function option1(value, row, index) {
        var htm = "";
        htm += '<button id="update" deviceId="' + value +
            '" onclick="editClick(' + value + ')">编辑</button>'
        return htm;
    }
    // 定义填充更新界面
    function editClick(id) {
        $("#saveClick").click(function (){
            // 添加保存
            saveClick();
        })
        $("#studentModal").modal("show");
        $.ajax({
            url: "/webapi/student/get/" + id,
        }).done((rs) => {
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#sno").val(rs.sno);
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#score").val(rs.score);

        });
    }
    // 定义添加按钮弹出
    function addClick(type) {
        // type =2 查询
        // type =1 添加
        $("#studentModal").on("hidden.bs.modal", (e) => {
            $("#studentForm")[0].reset();
        })
        if(type==1) {
            $("#saveClick").click(function (){
                // 添加保存
                saveClick();
            })
        } else if(type ==2) {
            $("#saveClick").click(function (){
                // 多条件查询
                search();
            })
        }

    }
    // 定义保存按钮
    function saveClick() {
        let data = $("#studentForm").serialize();
        $.ajax({
            url: "/webapi/student/insert",
            method: "post",
            data: data
        }).done((rs) => {
            //刷新页面
            reLoad();
            console.log(data);
        });
    }
    // 姓名查询
=======

<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>学号</th>
        <th>性别</th>
        <th>年龄</th>
        <th>分数</th>
        <th style="width: 100px;">操作</th>
    </tr>
    </thead>
    <tbody id="studentTb">
    <!--      <tr data-th-each="student:${data}">-->

    <!--          <td data-th-text="${student.id}"></td>-->
    <!--          <td data-th-text="${student.name}"></td>-->
    <!--          <td data-th-text="${student.sex}"></td>-->
    <!--          <td data-th-text="${student.age}"></td>-->
    <!--      </tr>-->
    </tbody>
</table>

<!-- JavaScript Bundle with Popper -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function flush() {
        $("#studentModal").on("hidden.bs.modal", (e) => {
            $("#studentForm")[0].reset();
        })
    }

    function addClick() {
        flush();
    }

>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
    function myClick() {
        var textName = document.getElementById("mytext").value;
        var urlAll = "/webapi/student/list";
        var urlName = "/webapi/student/" + textName;
        var myUrl = textName == "" ? urlAll : urlName;
        console.log("url=" + myUrl);

        $.ajax({
            url: myUrl
        }).done(function (rs) {
            let len = rs.length;
            console.log(len)
            let html = "";
            for (let i = 0; i < len; i++) {
                let item = rs[i];
                let sex = item.sex == 1 ? "男" : "女";
                html += "<tr>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + item.name + "</td>"
                    + "<td>" + item.sno + "</td>"
                    + "<td>" + sex + "</td>"
                    + "<td>" + item.age + "</td>"
                    + "<td>" + item.score + "</td>"
                    + "<td>" +
                    "<a  href='#' onclick='editClick(" + item.id + ")'>编辑</a>" +
                    "<a style='padding-left: 15px' href='#' onclick='deleteClick(" + item.id + ")'>删除</a></td>"
                    + "</tr>";
            }

<<<<<<< HEAD
            $("#stuTable").html(html);
        })
    }
    // 定义多条件查询按钮
    function search() {

    }
    // 定义删除按钮（id）
    function option2(value, row, index) {
        var htm = "";
        htm += '<button id="delete" deviceId="' + value +
            '" onclick="deleteClick(' + value + ')">删除</button>'
        return htm;
    }
    // 定义删除操作
=======
            $("#studentTb").html(html);
        })
    }

    function saveClick() {
        let data = $("#studentForm").serialize();
        $.ajax({
            url: "/webapi/student/insert",
            method: "post",
            data: data
        }).done((rs) => {
            myClick();
            $("#studentModal").modal("hide");
            console.log(data);
        });
    }

    function editClick(id) {

        $("#studentModal").modal("show");
        $.ajax({
            url: "/webapi/student/get/" + id,
        }).done((rs) => {
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#sno").val(rs.sno);
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#age").val(rs.score);

        });
    }

>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
    function deleteClick(id) {
        // console.log(typeof(sno))
        let isDelete = confirm("是否删除该信息？");
        if (isDelete) {
            $.ajax({
                url: "/webapi/student/delete/" + id,
                method: "delete"
            }).done((rs) => {
<<<<<<< HEAD
                reLoad();
            })
        }
    }
    // 初始化操作
    function Init() {
        $("#studentModal").modal("hide");
        console.log("开始加载表格");
        loadTable();
        console.log("表格加载完毕");
    }
    // 刷新操作
    function reLoad() {
        //刷新页面
        location.reload();
    }
    // 加载页面
    $(function (){
        //初始化页面
        Init();
    })
=======
                myClick();
            })
        }
    }
>>>>>>> bcb091a17987267f0d65e4154f997543fe5bec34
</script>
</body>
</html>